<div class="main-content">
	<div class="main-content-inner">
		<div class="breadcrumbs ace-save-state" id="breadcrumbs">
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="#">首页</a>
				</li>
                <li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="#">宿舍管理</a>
				</li>
				<li class="active">水电收费</li>
			</ul><!-- /.breadcrumb -->

			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon">
						<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
						<i class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div><!-- /.nav-search -->
		</div>

		<div class="page-content">
			<div class="page-header">
				<h1>
					水电收费

					<div class="pull-right inline">
                        <a href="#my-modal" role="button" class="bg-primary white btn btn-white btn-success btn-round" data-toggle="modal">
                            <i class="ace-icon fa fa-pencil green2"></i> 
                            增加
                        </a>
    
                        <div id="my-modal" class="modal fade" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h3 class="smaller lighter blue no-margin">增加记录</h3>
                                    </div>
    
                                    <div class="modal-body">
                                        <form class="form-horizontal" role="form">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 宿舍号 </label>
        
                                                <div class="col-sm-9">
                                                    <input type="text" id="form-field-1" placeholder="" class="col-xs-10 col-sm-5" />
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="form-field-select-1"> 类型 </label>

                                                <div class="col-sm-9">
                                                    <select class="col-xs-10 col-sm-5" id="form-field-select-1">
                                                        <option value=""></option>
                                                        <option value="ELECTRIC">电费</option>
                                                        <option value="WATER">水费</option>
                                                    </select>
                                                </div>
                                                
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 金额 </label>
        
                                                <div class="col-sm-9">
                                                    <input type="text" id="form-field-1" placeholder="" class="col-xs-10 col-sm-5" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
    
                                    <div class="modal-footer">
                                        <button class="btn btn-sm btn-success" data-dismiss="modal">
                                            <i class="ace-icon fa fa-pencil"></i>
                                            确认
                                        </button>
                                        <button class="btn btn-sm btn-danger pull-right" data-dismiss="modal">
                                            <i class="ace-icon fa fa-times"></i>
                                            取消
                                        </button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div>
                        
						<button class="btn btn-white btn-danger btn-round">
							<i class="ace-icon fa fa-times red2"></i>
							删除
						</button>
					</div>
				</h1>
			</div><!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">
							<table id="simple-table" class="table  table-bordered table-hover">
								<thead>
									<tr>
										<th class="center">
											<label class="pos-rel">
												<input type="checkbox" class="ace" />
												<span class="lbl"></span>
											</label>
										</th>
										<th class="center">宿舍号</th>
                                        <th class="center">类型</th>
                                        <th class="center">金额</th>
                                        <th class="center">时间</th>
										<th class="center">操作</th>
									</tr>
								</thead>
			
								<tbody>
									<?php 
									for ($x=0; $x<=6; $x++) {
										echo '<tr>
											<td class="center">
												<label class="pos-rel">
													<input type="checkbox" class="ace" />
													<span class="lbl"></span>
												</label>
											</td>
				
											<td class="center">
												<a href="#">5202</a>
											</td>
	
											<td class="center">
												电费
											</td>
											
											<td class="center">
												¥3.00
											</td>
	
											<td class="center">
												2022-03-12 10:58
											</td>
	
											<td class="center">
												<div class="hidden-sm hidden-xs btn-group">
													<button class="btn btn-xs btn-success">
														<i class="ace-icon fa fa-check bigger-120"></i>
													</button>
				
													<button class="btn btn-xs btn-info">
														<i class="ace-icon fa fa-pencil bigger-120"></i>
													</button>
				
													<button class="btn btn-xs btn-danger">
														<i class="ace-icon fa fa-trash-o bigger-120"></i>
													</button>
				
													<button class="btn btn-xs btn-warning">
														<i class="ace-icon fa fa-flag bigger-120"></i>
													</button>
												</div>					
											</td>
										</tr>';
									}
									?>
									
								</tbody>
							</table>
						</div><!-- /.span -->
					</div><!-- /.row -->
					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
	</div>
</div><!-- /.main-content -->